<template>
  <div class="in">
    <div class="tit">
      <div class="ul1">
        <div
          v-for="(item, index) in list"
          :key="index"
          :class="{ sta: ind == index }"
          @click="stab(index)"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <div class="qie" v-if="ind == 0">
      <div class="cai" v-if="table">
        <el-table :data="table" style="width: 100%">
          <el-table-column prop="orderSn" label="订单编号" align="center">
          </el-table-column>
          <el-table-column
            prop="createAt"
            label="下单时间"
            align="center"
            width="100"
          >
          </el-table-column>
          <el-table-column prop="shopName" label="商家名称" align="center">
          </el-table-column>
          <el-table-column prop="img" label="商品图片" align="center">
            <template slot-scope="scope">
              <img class="img1" :src="scope.row.imgurl" />
            </template>
          </el-table-column>
          <el-table-column prop="goodsName" label="商品名称" align="center">
          </el-table-column>
          <el-table-column prop="total" label="数量" align="center">
          </el-table-column>
          <!-- <el-table-column prop="zong"
                           label="发票类型"
                           align="center">
            <template slot-scope="scope">
              <span>{{scope.row.zuangtai==1?'增值发票':'普通发票'}}</span>
            </template>
          </el-table-column> -->
          <el-table-column label="发票规格" align="center">
            <template slot-scope="scope">
              <i
                class="el-icon-warning-outline guige"
                @click="guige(scope.$index, scope.row)"
              ></i>
            </template>
          </el-table-column>
          <el-table-column prop="zuangtai" label="状态" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.see == 0" class="color1">
                未申请
              </div>
              <div v-else-if="scope.row.see == 1" class="color2">
                申请中
              </div>
              <div v-else-if="scope.row.see == 2" class="color3">
                开票成功
              </div>
              <div v-else class="color2">
                拒绝
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="caozuo" label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                v-if="scope.row.see == 0"
                @click="kaifapiao(scope.$index, scope.row)"
                >申请发票</el-button
              >
            </template>
          </el-table-column>
          <template slot="empty">
            <div style="height:92px;line-height:92px;">暂无订单</div>
          </template>
        </el-table>
      </div>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
        prev-text="上一页"
        next-text="下一页"
        class="aut"
      >
      </el-pagination>
    </div>
    <div class="qie1" v-else-if="ind == 1 && ind2 == 1">
      <el-form
        label-position="right"
        label-width="100px"
        :model="form"
        :rules="rules"
        :hide-required-asterisk="true"
      >
        <el-form-item label="单位名称：">
          <el-input v-model="form.companyName"></el-input>
        </el-form-item>
        <el-form-item label="税号：">
          <el-input v-model="form.taxNum"></el-input>
        </el-form-item>
        <el-form-item label="地址：">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item label="开户行：">
          <el-input v-model="form.bankName"></el-input>
        </el-form-item>
        <el-form-item label="开户账号：">
          <el-input v-model="form.bankCard"></el-input>
        </el-form-item>
        <el-form-item label="邮箱：" prop="email">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" class="wan" @click="addUserInvoice"
        >完成</el-button
      >
      <el-button @click="addUserInvoice1">取消</el-button>
    </div>
    <div class="qie2" v-if="ind == 1 && ind2 == 0">
      <div class="ul">
        <div class="li" v-for="item in invoiecList" :key="item.id">
          <div class="a">
            <div>单位名称：{{ item.companyName }}</div>
            <div>税号：{{ item.taxNum }}</div>
            <div>地址：{{ item.address }}</div>
          </div>
          <div class="a c">
            <div>开户行：{{ item.bankName }}</div>
            <div>开户账号：{{ item.bankCard }}</div>
            <div>邮箱：{{ item.email }}</div>
          </div>
          <div class="qie2Right">
            <el-radio
            v-model="item.idDefault"
            :label="1"
            @change="setDefault(item.id)"
            >设置默认</el-radio
          >
           <el-button type="text" class="reg" @click="dialog6(item.id)">修改抬头</el-button>
          <!-- <el-radio v-model="item.idDefault"
                    v-else
                    :label="1">默认发票</el-radio> -->
                    <div >
                     
          <span class="del" @click="detInvoice(item.id)">删除</span>
                    </div>
          </div>
        </div>
      </div>
      <div class="tian">
        <el-button type="primary a" @click="ind2 = 1">添加抬头</el-button>
      </div>
    </div>
    <el-dialog title="发票详情" :visible.sync="dialog1" class="dialog">
      <div class="buzhou">
        <el-steps align-center :active="2" finish-status="success">
          <el-step title="已完成"></el-step>
          <el-step title="进行中"></el-step>
          <el-step title="步骤 3"></el-step>
        </el-steps>
      </div>
      <div class="nei">
        <div class="a">
          <div class="b">订单信息</div>
          <div class="c"><span>订单状态</span><span>已完成</span></div>
          <div class="c"><span>订单编号</span><span>111076265590</span></div>
          <div class="c">
            <span>下单时间</span><span>2020-03-12 11:45:34</span>
          </div>
          <div class="c"><span>发票类型</span><span>普通发票</span></div>
        </div>
        <div class="a">
          <div class="b">发票信息</div>
          <div class="c"><span>发票状态</span><span>待开票</span></div>
          <div class="c"><span>发票内容</span><span>商品明细</span></div>
          <div class="c"><span>发票抬头</span><span>个人</span></div>
        </div>
        <div class="a">
          <div class="b">收票信息</div>
          <div class="c"><span>收票人</span><span>张小帅</span></div>
          <div class="c"><span>联系电话</span><span>182****3000</span></div>
          <div class="c">
            <span>详细地址</span><span>河南郑州市金水区丰产路街道黄河路</span>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialog1 = false">申请开票</el-button>
      </div>
    </el-dialog>
    <el-dialog title="申请发票" class="dialog3" :visible.sync="dialog3">
      <div class="li">
        <div class="a">
          <div>单位名称：{{ item1.companyName }}</div>
          <div>税号：{{ item1.taxNum }}</div>
          <div>地址：{{ item1.address }}</div>
        </div>
        <div class="a c">
          <div>开户行：{{ item1.bankName }}</div>
          <div>开户账号：{{ item1.bankCard }}</div>
          <div>邮箱：{{ item1.email }}</div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="fapiao1">设置发票信息</el-button>
        <el-button type="primary" @click="fapiao">开票</el-button>
      </div>
    </el-dialog>
    <el-dialog title="发票规格" class="dialog3" :visible.sync="dialog2">
      <div class="li">
        <div class="a">
          <div>单位名称：{{ item1.companyName }}</div>
          <div>税号：{{ item1.taxNum }}</div>
          <div>地址：{{ item1.address }}</div>
        </div>
        <div class="a c">
          <div>开户行：{{ item1.bankName }}</div>
          <div>开户账号：{{ item1.bankCard }}</div>
          <div>邮箱：{{ item1.email }}</div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialog2 = false">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改抬头信息" class="regModel" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="单位名称：" :label-width="formLabelWidth">
      <el-input v-model="form.companyName"></el-input>
    </el-form-item>
    <el-form-item label="税号：" :label-width="formLabelWidth">
      <el-input v-model="form.taxNum"></el-input>
    </el-form-item>
    <el-form-item label="地址：" :label-width="formLabelWidth">
      <el-input v-model="form.address"></el-input>
    </el-form-item>
    <el-form-item label="开户行：" :label-width="formLabelWidth">
      <el-input v-model="form.bankName"></el-input>
    </el-form-item>
    <el-form-item label="开户账号：" :label-width="formLabelWidth">
      <el-input v-model="form.bankCard"></el-input>
    </el-form-item>
    <el-form-item label="邮箱：" :label-width="formLabelWidth">
      <el-input v-model="form.email"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="regtaitou">确 定</el-button>
  </div>
</el-dialog>
  </div>
  
</template>

<script>
export default {
  data() {
    var email = (rule, value, callback) => {
      const mal = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
      // const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      if (rule.required && !value) {
        this.emailJiaoYan = true;
        return callback(new Error("不能为空"));
      }
      if (value) {
        if (!mal.test(value)) {
          this.emailJiaoYan = true;
          callback(new Error("请输入正确邮箱"));
        } else {
          callback();
          this.emailJiaoYan = false;
        }
      }
    };
    return {
      ind: 0,
      ind2: 0,
      ind3: true,
      total: 0,
      list: ["补发发票", "增加发票"],
      table: [],
      dialog1: false,
      dialog2: false,
      dialog3: false,
      form: {
        companyName: "",
        taxNum: "",
        address: "",
        bankName: "",
        bankCard: "",
        email: ""
      },
      a: "1",
      invoiecList: [], // 增加发票的列表
      page: 1,
      pageSize: 1000,
      item1: {},
      rules: {
        email: { required: true, validator: email, trigger: "blur" }
      },
      emailJiaoYan: true,
        // gridData: [{
        //   date: '2016-05-02',
        //   name: '王小虎',
        //   address: '上海市普陀区金沙江路 1518 弄'
        // }, {
        //   date: '2016-05-04',
        //   name: '王小虎',
        //   address: '上海市普陀区金沙江路 1518 弄'
        // }, {
        //   date: '2016-05-01',
        //   name: '王小虎',
        //   address: '上海市普陀区金沙江路 1518 弄'
        // }, {
        //   date: '2016-05-03',
        //   name: '王小虎',
        //   address: '上海市普陀区金沙江路 1518 弄'
        // }],
        dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          name: '',
          shuihao:'',
          dizhi:'',
          huhang:'',
          zhanghao:'',
          you:'',
        },
        formLabelWidth: '120px',
        dataId : ''
      
    };
  },
  mounted() {
    this.list1();
    this.getUserInvoiceList();
  },
  methods: {
    fapiao1() {
      this.dialog3 = false;
      this.ind = 1;
    },
    fapiao() {
      this.$postRequest("/api/userInvoice/updateInvoiceApply", {
        userId: localStorage.getItem("userId"),
        orderId: this.pingjia1.orderId,
        invoiceId: this.item1.id
      }).then(res => {
        this.pingjia1 = {};
        this.$message.success(res.msg);
        this.dialog3 = false;
        this.list1();
      });
    },
    kaifapiao(a, b) {
      console.log(a, b);
      console.log(this.form.companyName);
      if (this.invoiecList.length !== 0) {
        this.$postRequest("/api/userInvoice/getDefaultInvoice", {
          userId: localStorage.getItem("userId")
        }).then(res => {
          console.log(res);
          if (res.data.id) {
            console.log(a, b, this.pingjia1);
            this.item1 = res.data;
            this.pingjia1 = b;
            this.dialog3 = true;
          } else {
            this.$message.error("你还没有发票信息，请添加");
            this.ind = 1;
          }
        });
      } else {
        this.$message.error("请添加发票抬头");
      }
    },
    dialog6(e){
      console.log(e);
      this.dialogFormVisible =true
      this.dataId = e
    },

    list1() {
      this.$postRequest("/api/userInvoice/getOrderInvoiceList", {
        userId: localStorage.getItem("userId")
      }).then(res => {
        console.log(res);
        this.table = res.data.list;
        this.total = res.data.total;
      });
    },
    // 增加发票列表
    getUserInvoiceList() {
      const that = this;
      this.$postRequest("/api/userInvoice/getUserInvoiceList", {
        userId: localStorage.getItem("userId"),
        pageNum: this.page,
        pageSize: this.pageSize
      }).then(res => {
        that.invoiecList = res.data.list;
        console.log(this.invoiecList);
      });
    },
    // 添加用户发票抬头
    addUserInvoice() {
      var form = this.form;
      if (
        form.companyName == "" ||
        form.taxNum == "" ||
        form.address == "" ||
        form.bankName == "" ||
        form.bankCard == "" ||
        form.email == ""
      ) {
        this.$message.error("请将内容补充完整");
      } else if (this.emailJiaoYan) {
        this.$message.error("请填写正确的邮箱");
      } else {
        const that = this;
        this.$postRequest("/api/userInvoice/saveUserInvoice", {
          userId: localStorage.getItem("userId"),
          companyName: form.companyName,
          taxNum: form.taxNum,
          address: form.address,
          bankName: form.bankName,
          bankCard: form.bankCard,
          email: form.email
        }).then(res => {
          that.$message.success("添加成功");
          that.ind2 = 0;
          that.getUserInvoiceList();
        });
      }
    },
    //修改发票抬头
    regtaitou(){
      var form = this.form;
      if (
        form.companyName == "" ||
        form.taxNum == "" ||
        form.address == "" ||
        form.bankName == "" ||
        form.bankCard == "" ||
        form.email == ""
      ) {
        this.$message.error("请将内容补充完整");
      } else  {
        const that = this;
        this.$postRequest("/api/userInvoice/updateUserInvoice", {
          id:that.dataId ,
          companyName: form.companyName,
          taxNum: form.taxNum,
          address: form.address,
          bankName: form.bankName,
          bankCard: form.bankCard,
          email: form.email
        }).then(res => {
          that.$message.success("添加成功");
          that.ind2 = 0;
          that.getUserInvoiceList();
        });
      }
    },
    addUserInvoice1() {
      this.ind2 = 0;
    },
    // 设置默认
    setDefault(id) {
      const that = this;
      this.$postRequest("/api/userInvoice/setUserInvoiceDefault", {
        userId: localStorage.getItem("userId"),
        invoiceId: id
      }).then(res => {
        that.$message.success("设置成功");
        that.getUserInvoiceList();
      });
    },
    // 删除发票
    detInvoice(id) {
      const that = this;
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          that
            .$postRequest("/api/userInvoice/deleteUserInvoice", {
              userId: localStorage.getItem("userId"),
              invoiceId: id
            })
            .then(res => {
              that.$message.success("删除成功");
              that.getUserInvoiceList();
            });
        })
        .catch(() => {
          that.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    stab(i) {
      this.ind = i;
    },
    xiangqing(a, b) {
      this.dialog1 = true;
    },
    handleCurrentChange(currentPage) {
      console.log(currentPage); //点击第几页
    },
    guige(a, b) {
      console.log(a);
      this.$postRequest("/api/userInvoice/getInvoiceSpec", {
        userId: localStorage.getItem("userId"),
        orderId: b.orderId
      }).then(res => {
        if (res.data) {
          this.item1 = res.data;
          this.dialog2 = true;
        } else {
          this.$message.error("该商品没有发票信息");
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
.in {
  width: 100%;
  background: #ffffff;
  border: 1px solid #eeeeee;
  .tit {
    width: 100%;
    height: 50px;
    background: #ffffff;
    border-bottom: 1px solid #eeeeee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .ul1 {
      display: flex;
      height: 100%;
      align-items: center;
      div {
        width: 100px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
        cursor: pointer;
        &.sta {
          color: #1a69e0;
          position: relative;
          &::after {
            content: "";
            width: 100px;
            height: 2px;
            background: #1a69e0;
            position: absolute;
            bottom: 0;
            left: 0;
          }
        }
      }
    }
    .ul2 {
      padding-right: 20px;
      cursor: pointer;
      color: #1a69e0;
      display: flex;
      align-items: center;
      .img {
        width: 20px;
        height: 20px;
        margin-right: 8px;
      }
      &:hover {
        opacity: 0.8;
      }
    }
  }
  .qie {
    .img1 {
      width: 50px;
      height: 50px;
    }
    /deep/ .el-button + .el-button {
      margin-top: 4px;
    }
    /deep/ .el-button + .el-button {
      margin-left: 0px;
    }
    .aut {
      text-align: center;
      margin-top: 14px;
      margin-bottom: 14px;
    }
    /deep/ .el-pagination button,
    .el-pagination span:not([class*="suffix"]) {
      width: 60px;
    }
    .color2 {
      color: #1a69e0;
    }
    .color1 {
      color: #ff0000;
    }
    .guige {
      font-size: 22px;
      color: #ff0000;
      cursor: pointer;
    }
  }
  .dialog {
    .buzhou {
      width: 60%;
      margin: 0 auto 20px;
    }
    /deep/ .el-dialog__body {
      padding: 20px;
    }
    /deep/ .el-dialog__header {
      padding: 10px 20px;
      border-bottom: 1px solid #eeeeee;
    }
    .nei {
      width: 100%;
      height: 400px;
      background: #f9f9f9;
      border: 1px solid #eeeeee;
      padding: 10px 20px 30px 20px;
      .a {
        margin-bottom: 30px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 24px;
        .c {
          display: flex;
          align-items: center;
          & > span:nth-child(1) {
            width: 70px;
          }
        }
      }
    }
  }
  .qie1 {
    padding: 20px 540px 30px 20px;
    .wan {
      margin-left: 200px;
    }
  }
  .qie2 {
    padding: 30px 20px;
    max-height: 788px;
    overflow-y: auto;
    .ul {
      width: 100%;
      .li {
        width: 100%;
        height: 140px;
        background: #f7f7f7;
        border: 1px solid #eeeeee;
        padding: 20px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        &::after {
          content: "";
          position: absolute;
          top: 50%;
          right: 130px;
          width: 1px;
          height: 20px;
          background: #e5e5e5;
          transform: translateY(-50%);
        }
        .a {
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #000000;
          line-height: 30px;
          & > div {
            height: 30px;
          }
          &.c {
            margin-left: 70px;
          }
        }
        // /deep/ .el-radio {
        //   margin-right: 130px;
        // }
        .del {
              width: 100px;
          // position: absolute;
          right: 82px;
          top: calc(50% - 25px);
          cursor: pointer;
          color: #606266;
          font-size: 14px;
          line-height: 50px;
          &:hover {
            color: #409eff;
          }
        }
      }
    }
    .tian {
      width: 100%;
      margin: 30px 0;
      text-align: center;
    }
    .qie2Right{
          display: flex;
          align-items: center;
          width: 370px;
          justify-content: space-around;
      .reg{
           cursor: pointer;
           width: 64px;
           font-size: 14px;
      }
    }
  }
  .dialog3 {
    .li {
      line-height: 30px;
    }
  }
}
</style>